<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四种基本选择器</title>
	<style>
	    /*
	       使用css渲染标签
	         css使用格式
	           选择器{  属性集 }

	     */
		/*所有p标签 都要执行这个样式*/
		p{
			color: cadetblue;
		}
		/*
		   标签选择器  以标签名作为选择器
		   作用 按照标签来分类 按照标签来渲染
		   优点  快速为当前页面所有相同标签设置相同的样式
		   缺点 不能进行差异化设计。
		   语法  标签名{属性集}
		*/
		/*
		   类选择器
		       一类标签进行选择  以class属性划分
		       语法  .class属性值{属性集}
		       作用  对一类标签进行渲染
		       优点  根据需求进行选择，不在乎是哪个标签,只在乎class属性
		       缺点  需要设置class属性

		 */
		/*蔬菜变绿 水果变红*/
		.fruit{
			color: red;
		}
		.vegetable{
			color: green;
		}

		/*
		  id 是唯一
		    找到指定的惟一的标签进行渲染 使用 id选择器
		    #id值{ 属性集 }

		    作用 一次选择一个标签
		    优点  保证渲染的唯一性
		    缺点 需要手动添加id属性。
		*/
		#mabaoguo{
			color: grey;
		}
		/* 通用选择器*/
		*{
			font-family: 楷体;
		}
	</style>
	</head>
	<body>
		<p>这是一首诗  名字 生活  原文 网</p>
		<div> 
		   二营长的意大利炮
		</div>
		<div>
			<span>
				我是div中的span 
			</span>
		</div>
		<div class="vegetable">黄瓜</div>
		<div class="fruit">西瓜瓤</div>
		<div class="vegetable">橄榄</div>
		<div class="fruit">火龙果</div>
		<div class="vegetable">冬瓜</div>		
		<div class="fruit">圣女果</div>

		<span class="vegetable">span菠菜</span>
		<div id="mabaoguo">
			年轻人不讲武德~ 
		</div>
		
		<div id="madashi">
			耗子尾汁
		</div>
	</body>
</html>
